<!--按揭赎楼新增-->
<template>
	<view class="box_ajsl temp_wrap clearfix">
		<!--申请人部分-->
		<view class="item_wrap clearfix">
			<view class="title_bar">客户信息</view>
			<view class="img_wrap" v-if="isNew">
				<image @click="uploadCardFront" src="/static/public/sfz.png" class="formImg" v-if="!url1"></image>
				<image :src="url1" class="formImg" v-else></image>
				<icon class='formImg_item_icon' v-if="url1" :data-id="1" type="clear" size="20" color="red" @click="clearFormImg" />
			</view>
			<view class="item_input">
				<text class="title">购房人姓名:<text class="red">*</text></text>
				<m-input class="right" type="text" v-model="data.buyName" :disabled="isOurSelf"
					placeholder="请输入姓名"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">身份证号:<text class="red">*</text></text>
				<m-input class="right" type="text" v-model="data.buyCard" :disabled="isOurSelf"
					placeholder="身份证号码"   ></m-input>
			</view>
			<view class="item_input">
				<text class="title">手机号码:<text class="red">*</text></text>
				<m-input class="right" type="number" v-model="data.buyPhone" :disabled="isOurSelf"
					placeholder="手机号码" :maxLength="11"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">售房人姓名:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerName" :disabled="isOurSelf"
					placeholder="请收入售房人姓名"   ></m-input>
			</view>
			<view class="item_input">
				<text class="title">身份证号:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerCard" :disabled="isOurSelf"
					placeholder="请收入身份证号"   ></m-input>
			</view>
			<view class="item_input">
				<text class="title">手机号码:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerPhone" :disabled="isOurSelf"
					placeholder="请收入手机号码"   ></m-input>
			</view>
			<view class="item_input">
				<text class="title">婚姻状况:</text>
				<view class="right address">
					<picker @change="bindPickerChange" :range="columns" :disabled="isOurSelf"> 
						<view>
							<input type="text" placeholder="请选择婚姻状况" v-model="data.basicBorrowerMarriage" disabled/>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<!--star配偶信息-->
		<view class="item_wrap clearfix" v-if="data.basicBorrowerMarriage === '已婚'">
			<view class="title_bar">配偶信息</view>
			<view class="img_wrap" v-if="isNew">
				<image @click="uploadCardFrontMate" src="/static/public/sfz.png" class="formImg" v-if="!url2"></image>
				<image :src="url2" class="formImg" v-else></image>
				<icon class='formImg_item_icon' v-if="url2" :data-id="2" type="clear" size="20" color="red"  @click="clearFormImg" />
			</view>
			<view class="item_input">
				<text class="title">配偶姓名:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerMateName" :disabled="isOurSelf"
					placeholder="请输入姓名" :maxLength="11"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">身份证号码:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerMateCard" :disabled="isOurSelf"
					placeholder="请输入身份证"  :maxLength="18"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">联系电话:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerMatePhone" :disabled="isOurSelf"
					placeholder="联系电话" :maxLength="11"  ></m-input>
			</view>
		</view>
		<!--end配偶信息-->
		<!--start贷款信息-->
		<view class="item_wrap clearfix">
			<view class="title_bar">贷款信息</view>
			<view class="item_input">
				<text class="title">抵押人姓名:</text>
				<m-input class="right" type="text" v-model="data.pledgeName" :disabled="isOurSelf"
					placeholder="请输入抵押人姓名"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">身份证号码:</text>
				<m-input class="right" type="text" v-model="data.pledgeCard" :disabled="isOurSelf"
					placeholder="请输入身份证号码" :maxLength="18"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">联系电话:</text>
				<m-input class="right" type="number" v-model="data.pledgePhone" :disabled="isOurSelf"
					placeholder="请输入联系电话" :maxLength="11"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">不动产地址:</text>
				<m-input class="right" type="text" v-model="data.pledgeHouseAddress" :disabled="isOurSelf"
					placeholder="请输入不动产地址"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">产权号:</text>
				<m-input class="right" type="text" v-model="data.pledgeHouseNumber" :disabled="isOurSelf"
					placeholder="请输入产权号"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">所属区域:</text>
				<m-input class="right" type="text" v-model="data.pledgeHouseDistrict" :disabled="isOurSelf"
					placeholder="请输入所属区域"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">小区名字:</text>
				<m-input class="right" type="text" v-model="data.pledgeHouseName" :disabled="isOurSelf"
					placeholder="请输入小区名字"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">面积:</text>
				<m-input class="right" type="number" v-model="data.pledgeHouseArea" :disabled="isOurSelf"
					placeholder="面积"  ></m-input>
				<text class="dw">(m²)</text>
			</view>
			<view class="item_input">
				<text class="title">成交价:</text>
				<input class="right" type="text" v-model="data.pledgeOneBalance" :disabled="isOurSelf"
					placeholder="请输入成交价"  ></input>
				<text class="dw">(万元)</text>
			</view>
			<view class="item_input">
				<text class="title">贷款银行:</text>
				<m-input class="right" type="text" v-model="data.pledgeOneBank" :disabled="isOurSelf"
					placeholder="请输入贷款银行"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">余额款金额:</text>
				<input class="right" type="text" v-model="data.surplusMoney" :disabled="isOurSelf"
					placeholder="请输入余额款金额"  ></input>
				<text class="dw">(万元)</text>
			</view>
		</view>
		<!--end贷款信息-->
		<view class="btn_wrap" v-if="isNew">
			<button class="btn" @click="btnSubmit">确 认</button>
		</view>
		
	</view>
</template>

<script>
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {uploadCard} from '@/common/util.js'
	export default {
		components: {
			mInput,
			pickRegions 
		},
		props:["formData","isNew","isOurSelf"],
		data(){
			return{
				url1: null,
				url2: null,
				columns: ["未婚", "已婚"],
				refund: ["等额本息", "先息后本", "等额本金", "等额等息"],
				data:{
					//申请人信息
					buyName: null,
					buyCard: null,
					buyPhone: null,
					basicBorrowerName: null,
					basicBorrowerCard: null,
					basicBorrowerPhone: null,
					basicBorrowerMarriage: null,
					//配偶信息
					basicBorrowerMateName: null,
					basicBorrowerMateCard: null,
					basicBorrowerMatePhone: null,
					//不动产信息
					pledgeName: null,
					pledgeCard: null,
					pledgePhone: null,
					pledgeHouseAddress: null,
					pledgeHouseNumber: null,
					pledgeHouseDistrict: null,
					pledgeHouseName: null,
					pledgeHouseArea: null,
					pledgeOneBalance: null,
					pledgeOneBank: null,
					surplusMoney: null,
					
				},
				defaultRegionCode:"500103"
			}
		},
		created() {
			if(this.formData){
				this.data = JSON.parse(JSON.stringify(this.formData));
			}
		},
		methods:{
			//上传申请人按钮
			uploadCardFront() {
				let id = 1;
				uploadCard("/applet/order/scanIdCard", id).then(res => {
					this.url1 = res.filePath;
					this.data.buyName = res.data.name;
					this.data.buyCard = res.data.num;
				});
			},
			//上传配偶身份证
			uploadCardFrontMate() {
				let id = 2;
				uploadCard("/applet/order/scanIdCard", id).then(res => {
					this.url2 = res.filePath;
					this.data.basicBorrowerMateName = res.data.name;
					this.data.basicBorrowerMateCard = res.data.num;
				});
			},
			//婚姻选择状况
			bindPickerChange (e) {
				let index = e.detail.value;
				this.data.basicBorrowerMarriage = this.columns[index];
			},
			//清除扫描图片
			clearFormImg(e) {
				let imgId = e.target.dataset.id ||e.currentTarget.dataset.id;
				if(imgId == 1) this.url1 = null;
				if(imgId == 2) this.url2 = null;
			},
			//确认
			btnSubmit() {
				//判断是否结婚
				let isMarry = this.data.basicBorrowerMarriage;
				if(isMarry === "已婚"){
					let checkRes = graceChecker.check(this.data, formRuleConfig.ajslRuleMate);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
				}
				let checkRes = graceChecker.check(this.data, formRuleConfig.ajslRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				this.data.basicBorrowerMarriage = isMarry ||"未婚";
				let formData = JSON.parse(JSON.stringify(this.data));
				//调用父组件的提交函数
				this.$emit("postOrderInfo", formData);
			}
		}
	}
</script>

<style scoped lang="scss">
	.item_wrap{
		margin-top: 20rpx;
		width: 100%;
		padding: 0 40rpx 60rpx 40rpx;
		background: #FFFFFF;
		.title_bar {
			font-size: 32rpx;
			font-weight: bolder;
			line-height: 42rpx;
			margin-top: 20rpx;
		}
	}
	.img_wrap{
		width: 100%;
		position: relative;
	}
	.formImg{
		width: 100%;
		height: 400rpx;
		position: relative;
	}
	.formImg_item_icon {
	    position: absolute;
	    right: 0;
		top: 0;
	}
	.item_input{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #dcdcdc;
		height: 82rpx;
		.title{
			font-size: 28rpx;
		}
		.right{
			flex: 1;
			text-align: right;
			font-size: 14px;
		}
		.address{
			padding: 20rpx 10rpx;
		}
		.addressPick{
			height: 38rpx;
			line-height: 38rpx;
			overflow: hidden;
		}
		.dw{
			font-size: 28rpx;
		}
	}
	.btn_wrap{
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx 30rpx;
		.btn{
			background: #52AAF8;
			color: #FFFFFF;
			border-radius: 40rpx;
		}
	}
</style>
